<template>
	<view>

		<view class="map-container">
			<view class="map-wrap" :style="'height:'+mapHeight+'px'">
				<map id="map" ref="map" :scale="scale" :latitude="latitude" :longitude="longitude"
				 :polyline="polyline"  :markers="markers">
				 <cover-image class="map-btn rest-btn" @click="refreshHandel" src="@/static/images/bus/rest.png"></cover-image>
				</map>
			</view>
		</view>
		<view class="staion-box" :style="'height:'+stationHeight+'px'">
			<view class="card-panel">
				<view class="display-flex display-flex-align-center" v-if="plan&&plan.driver_id&&plan.status==1">
					<view class="ddfache">
						等待发车
					</view>
					<view class="yuj">
						预计{{plan.dp_time}}发车
					</view>
				</view>
				<view class="display-flex display-flex-align-center" v-else-if="plan&&plan.driver_id&&plan.status==2">
					<view class="station-name font-color-weak-28">
						距<text>{{selectStation.stop_name}}</text>
					</view>
					<view v-if="driver.count>0&& driver.distance >= 30" class="bus-list-item">
						<view  class="top">
							<image class="gif-img" src="/static/images/bus/an_realtime.gif"></image>
							<view  class="time-box">
								<text class="time-value" v-if="driver.distance > 400"><text class="time-value">{{driver.count}}</text>站</text>
								<text class="time-value" v-else>即将到站</text>
							</view>
						</view>
						<view class="bottm">
							<text class="staion-num" v-if="driver.time>0">{{driver.time}}</text>
							<text v-else>小于<text class="staion-num">1</text></text>分钟<text style="margin: 0rpx 6rpx;"> . </text>
							<text class="distance">{{driver.distance | distanceFormat}}</text>
						</view>
					</view>
					<view class="bus-list-item" v-else-if="driver.count>0&& driver.distance <= 30">
						<view class="single-line-tips">
							已到站
						</view>
					</view>
					<!-- 没有车辆时提示 -->
					<view class="nobus-box" v-else>
						<view class="tips-text">
							等待首站发车
						</view>
					</view>
					
				</view>
				<view class="display-flex display-flex-align-center no-real" v-else-if="plan&&(plan.status==0||plan.status==3)">
					班次运营已结束
				</view>
				<view class="display-flex display-flex-align-center no-real" v-else>
					该班次无实时数据
				</view>
			</view>
			<scroll-view class="bus-station-list"
			:scroll-x="true" :scroll-into-view="scrollLeft" :scroll-with-animation="true">
				<block  v-for="(item,index) in stations">
					<view class="bus-station-list-item" :id="'bus_'+index"
						:key="index">
						<!-- 站点 -->
						<view class="station-info">
							<!-- 车 -->
							<view class="bus-image-box"  v-if="driver.next==index&&driver.next_distance<30" >
								<image class="bus-image" src="/static/images/bus/bus_icon.png"></image>
							</view>
							<!-- 中间点 -->
							<view class="status-bg">
								<!-- 起点 -->
								<image class="station-image start-image" v-if="index == 0"
									src="/static/images/bus/qi5.png" style="width: 40rpx;height: 40rpx;"></image>
								<!-- 终点 -->
								<image class="station-image stop-image" v-else-if="stations.length-1 == index"
									src="/static/images/bus/zhong.png" style="width: 40rpx;height: 40rpx;"></image>
								<!-- 选中 -->
								<image class="station-image right_arrow" v-else-if="index == selectStationIndex"
									src="/static/images/bus/right_arrow.png"></image>
								<!-- 白色箭头 -->
								<image class="station-image white_arrow" v-else
									src="/static/images/bus/white_arrow.png"></image>
							</view>
			
							<!-- 底部站名 -->
							<view class="station-name" @click="changeStation(index)">
								<view :class="{'select-active' : index == selectStationIndex}">{{item.stop_name | handleStationName}}
								</view>
							</view>
						</view>
						<!-- 中间线 -->
						<view class="line-info" v-if="stations.length-1 > index">
							<view class="bus-image-box"  v-if="(driver.next==(index+1))&&(driver.next_distance>=30)">
								<image class="bus-image" src="/static/images/bus/bus_icon.png"></image>
							</view>
			
							<view class="line"></view>
						</view>
					</view>
				</block>
			</scroll-view>
			<view v-if="orderId" class="footer">
				<view @click="goOrderDetail()" class="order-button">
					立即验票
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	
		<u-action-sheet :list="daList" @click="daClick" v-model="daShow"></u-action-sheet>

	</view>
</template>

<script>
	import Cache from '../../../utils/cache';
	import { CITY_INFO} from '../../../config/cache.js'
	import {getLineDetail, getLinePlanDetail, getDriverCar} from '@/api/bus'
	export default {
		computed: {
		},
		components:{
		},
		data() {
			return {
				carList: [],
				selectStationIndex: 0, //选中的站点索引
				selectStation: {}, //选中的站点
				scrollLeft: 'bus_0', //底部选中站点滚动至可视区域
				orderShow:false,
	
				line_id: '',
			    planId: '',
				controls: [{
					id: 1,
					position: {},
					iconPath: "../../static/images/bus/arrow_grey.png",
					clickable: true
				}],
				lineInfo: {},
				listHeight: '',
				widowHeight: '',
				showStationList: true,
				animationData: {},
				ExAnimationNum: 1,
				seleRegular: {},
				stations: [],
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: '',
				longitude: '',
				covers: [],
				startStopId: '',
				endStopId: '',
				points: [],
				polyline: [],
				markers: [],
				includePoints: [],
				daList: [{
					text: '查看实景图',
					color: '#26a2ff',
					fontSize: 28
				},{
					text: '导航去这里',
					color: '#26a2ff',
					fontSize: 28
				}],
				daShow: false,
				currentStop: {},
				routes: [],
				scale: 15,
				systemType: '',
				mapHeight: 300,
				stationHeight: 300,
				plan: {},
				setInterName: null, //定时器对象
				driver: {},
				start: {},
				current: {},
				next: {},
				stationId: '',
				orderId: '',
			}
		},
		onUnload() {
			clearInterval(this.setInterName);
		},
		onHide() {
			clearInterval(this.setInterName);
		},
		filters: {
			distanceFormat(val) {
				if (val < 1000) {
					return val.toFixed(0) + '米';
				} else {
					let distance = val / 1000;
					return distance.toFixed(1) + '公里';
				}
			},
			// 站点名字过长，显示首尾内容，中间省略号显示
			handleStationName(value){
				let name = value;
				if(name.length > 9){
					let str1 = name.substring(0,5);
					let str2 = name.substring(name.length - 3);
					name = str1+'···'+str2;
				}
				return name
			}
		},
		watch: {
			selectStationIndex() { //站点列表滚动中心
				if (this.selectStationIndex <= 3) {
					this.scrollLeft = 'bus_0';
				} else if (parseInt(this.stations.length - 3) <= this.selectStationIndex) {
					this.scrollLeft = 'bus_' + this.selectStationIndex;
				} else {
					this.scrollLeft = 'bus_' + parseInt(this.selectStationIndex - 3);
				}
			}
		},
		onLoad(option) {
			var that = this
			this.line_id = option.line_id
			this.planId = option.plan_id
			this.stationId = option.line_stop_id
			this.orderId = option.order_id
			
			var sys =  uni.getSystemInfoSync()
			that.mapHeight = sys.screenHeight*(2/5)
			that.stationHeight = sys.screenHeight*(3/5)
			console.log(sys)
			that.initPlan()
			
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
			        console.log(res);
					that.latitude = res.latitude
					that.longitude = res.longitude
					
			    }
			});
			
			
		
		},
		mounted() {

		},
		onShow() {
			// 定时获取实时数据
			var that = this
			this.setInterName = setInterval(() => {
				that.getRealBus();
			}, 15000)
		},
		async onReady() {
			uni.showLoading({
				title:'初始化中'
			})
			await this.initLine({
				line_id: this.line_id
			})
			
		
		},
		watch: {},
		methods: {
			refreshHandel(){
				this.getRealBus(true);
			},
			goOrderDetail(){
				uni.navigateTo({
					url:'/pages/users/order_detail/index?order_id='+this.orderId
				})
			},
			getRealBus(isLoading){
				var that = this
				getDriverCar({plan_id: this.planId, line_stop_id: this.selectStation.line_stop_id}).then(res => {
					that.driver = res.data
					if(that.driver){
						if(that.markers.length!=that.stations.length){
							that.markers.pop()
						}
						that.latitude = that.driver.lat
						that.longitude = that.driver.lng
						var car_num = that.plan.car ?('司机位置-'+that.plan.car.car_num): '司机位置'
					 var maks = [{
								latitude: that.driver.lat,
								longitude: that.driver.lng,
								iconPath: '../../../static/images/bus/bus-3.png',
								width: 28,
								height: 35,
								callout: {
									content: car_num,
									bgColor: "#000000aa",
									fontSize: 14,
									color: "#ffffff",
									borderRadius: 3,
									display: "ALWAYS",
									textAlign: "center",
									padding: 10
								}
							}]
						that.markers = that.markers.concat(maks);
						if(isLoading){
							this.$u.toast('刷新成功')
						}
					}
				}).catch(err => {
					if(isLoading){
						this.$u.toast('刷新成功')
					}
					console.log(err)
				})
			},
			
			changeStation(index) { //切换站点
				// console.log(JSON.stringify(this.stations[index]));
				this.selectStationIndex = index;
				this.selectStation = this.stations[index];
				console.log(1212,this.selectStation)
				this.latitude = this.selectStation.lat;
				this.longitude = this.selectStation.lng;
				this.getRealBus();
			},
			initLine(data) {
				var that = this
				getLineDetail(data).then(res => {
					that.lineInfo = res.data.data
					uni.hideLoading()
					console.log(2222,res)
					that.stations = that.lineInfo.stations
					
					if(that.stationId){
						that.stations.forEach( (el,k) => {
							if(that.stationId == el.line_stop_id){
								that.selectStation = that.stations[k]
								that.selectStationIndex = k;
							}
						})
					} else {
						that.selectStation = that.stations[1]
						that.selectStationIndex = 1;
						that.latitude = that.stations[1].lat
						that.longitude = that.stations[1].lng
					}
					
					that.getRealBus();
					uni.setNavigationBarTitle({
						title: that.lineInfo.line_sn
					})
					
					that.routes = this.lineInfo.routes
					that.initPolyLine(that.routes)
					that.initIncludePoints(that.stations)
					that.initMarker(that.stations)
				}).catch(err => {
					console.log(err)
				})
			},
			initPlan() {
				var that = this
				getLinePlanDetail({plan_id: this.planId}).then(res => {
					this.plan = res.data
					
				})
			},
			
      

			initPolyLine(route) {

				var that = this
				//	that.polyline = []
				route.forEach(function(item) {
					that.points.push({
						latitude: item.lat,
						longitude: item.lng
					})
				})
				that.polyline = [{ //指定一系列坐标点，从数组第一项连线至最后一项
					points: this.points,
					color: "#26a2ff", //线的颜色
					width: 6, //线的宽度
					// dottedLine:true,//是否虚线
					arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
				}]
			},
			initIncludePoints(stat) {
				var that = this
				var data = []
				stat.forEach(function(item) {
					data.push({
						latitude: item.lat,
						longitude: item.lng
					})
				})
				//initPolyLine(that.routes)
				that.includePoints = data
			},
			initMarker(stat) {
				var that = this
				var data = []
				stat.forEach(function(item, i) {
					data.push(that.getMarkerObj(stat, item, i))
				})
				that.markers = data
			},

			//导航
			daClick:function(e) {
				var that = this
				if(e==1){
					uni.openLocation({
						//​使用微信内置地图查看位置。
						latitude: parseFloat(that.currentStop.lat),
						longitude: parseFloat(that.currentStop.lng),
						name: that.currentStop.stop_name
					});
				} else {
					
				   that.currentStop.images.length?that.joinQun():that.$u.toast('该站点暂无站点图片')
				}
			},
			
			switchMode() {
				this.showStationList = !this.showStationList
				var that = this
				setTimeout(function() {
					that.calHeight()
				}, 300)
				//  this.calHeight()
				// 定义动画内容
				// this.animation.translateY(180).step()
				// // 导出动画数据传递给data层
				// this.animationData = this.animation.export()
				// this.ExAnimationNum++
	
			},
			calHeight() {
				var that = this
				uni.getSystemInfo({
					success: function(res) { // res - 各种参数	
					console.log(res)
						that.widowHeight = res.safeArea.bottom
						that.mapHeight = that.widowHeight
						
					}
				});
			},
			getMarkerObj(stat, item, i) {
				var data = {}
				var that =this
				if (i == 0) { //起點
				
					data = {
						id: item.id,
						latitude: item.lat,
						longitude: item.lng,
						iconPath: '/static/images/bus/start_point.png',
						width: 28,
						height: 28,
						callout: {
						    content: item.stop_name,
						    color: '#00BFFF',
						    fontSize: 10,
						    borderRadius: 4,
						    borderWidth: 1,
						    borderColor: '#333300',
						    bgColor: '#CCFF99',
						    padding: '5',
						    display: 'ALWAYS'
						}
						
					}
				} else if (i == stat.length - 1) { //終點
					data = {
						id: item.id,
						latitude: item.lat,
						longitude: item.lng,
						iconPath: '/static/images/bus/end_point.png',
						width: 28,
						height: 28,
						callout: {
						    content: item.stop_name,
						    color: '#00BFFF',
						    fontSize: 10,
						    borderRadius: 4,
						    borderWidth: 1,
						    borderColor: '#333300',
						    bgColor: '#CCFF99',
						    padding: '5',
						    display: 'ALWAYS'
						}
					}
				} else {
					data = {
						id: item.id,
						latitude: item.lat,
						longitude: item.lng,
						iconPath: '/static/images/bus/start_station_pos.png',
						width: 16,
						height: 16,
						callout: {
						    content: item.stop_name,
						    color: '#00BFFF',
						    fontSize: 10,
						    borderRadius: 4,
						    borderWidth: 1,
						    borderColor: '#333300',
						    bgColor: '#CCFF99',
						    padding: '5',
						    display: 'ALWAYS'
						}
					}
				}

				return data
			},


			collect() {
				var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
				this.$u.api.collectLine({
					line_id: this.lineInfo.line_id,
					opr: 1,
					c_type: 'collect',
					type: 1,
					city_id: city.id
				}).then(res => {
					if (res.code == 0) {
						this.isCollect = 1
						this.$u.toast('收藏成功')
					}
				})
			},
			
			joinQun:function(){
				   // 预览图片
				   var that = this
				   uni.previewImage({
				   	urls: that.currentStop.images
				   });
					// uni.previewImage({
					// 	urls: res.tempFilePaths,
					// 	longPressActions: {
					// 		itemList: ['发送给朋友', '保存图片', '收藏'],
					// 		success: function(data) {
					// 			console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 		},
					// 		fail: function(err) {
					// 			console.log(err.errMsg);
					// 		}
					// 	}
					// });
			}

		}

	}
</script>

<style lang="scss" scoped>
	.map-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		//	position: relative;
	}

	/*  #ifdef  MP  */
	.map-container .map-wrap {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	/*  #endif  */

	/*  #ifdef  H5  */
	.map-container .map-wrap {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		top: -44px;
		position: relative;
	}

	/*  #endif  */


	#map {
		width: 100%;
		flex: 1;
	}

	#line-info {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.line-wrap {
		background: #fff;
		border-radius: 12px 12px 0 0;
		box-shadow: 0 0 7px 0 rgba(0, 0, 0, .3);
		position: relative;
	}
	
	.staion-box{
		background-color: #FFFFFF;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding-top: 30rpx;
	}
	.card-panel{
		box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
		margin: 0 40rpx 0 40rpx;
		padding: 10rpx 30rpx 0 30rpx;
		height: 60px;
	}
	.bus-station-list {
		width: 750rpx;
		// margin-top: 20rpx;
		white-space: nowrap;
	
		.bus-station-list-item {
			display: inline-flex;
			width: 130rpx;
			padding-top: 76rpx;
			position: relative;
	
			&:first-child {
				margin-left: 50rpx;
			}
	
			.station-info {
				display: flex;
				flex-direction: column;
				align-items: center;
	
				.status-bg {
					width: 40rpx;
					height: 16rpx;
					background: #26A2FF;
					position: relative;
	
					// border: 1px solid red;
					.station-image {
						position: absolute;
					}
	
					// 白色箭头
					.white_arrow {
						top: 0;
						left: 10rpx;
						width: 14rpx;
						height: 14rpx;
						// border: 1px solid red;
					}
	
					// 当前站点
					.right_arrow {
						top: -6rpx;
						left: 2rpx;
						width: 30rpx;
						height: 30rpx;
						// border: 1px solid red;
					}
	
					.start-image {
						top: -14rpx;
						left: -2rpx;
						// left: 10rpx;
						width: 40rpx;
						height: 40rpx;
					}
	
					.stop-image {
						top: -14rpx;
						left: 0rpx;
						width: 40rpx;
						height: 40rpx;
					}
	
				}
	
				.station-name {
					position: relative;
					margin-top: 24rpx;
					writing-mode: vertical-lr;
					color: #848484;
	
					.select-active {
						//选中站点绑定该类
						color: #000000;
					}
	
					.tag {
						position: absolute;
						color: #26A2FF;
						font-size: 22rpx;
						border: 1rpx solid #26A2FF;
						border-radius: 4rpx;
						padding: 4rpx 2rpx;
						background: rgba(33, 77, 255, 0.06);
					}
				}
			}
	
			.line-info {
				.bus-image-box {
					margin-left: 46rpx;
				}
				
				.line {
					width: 100rpx;
					height: 16rpx;
					background: #26A2FF;
					// z-index:1;
					// position: absolute;
					// top: 36rpx;
				}
			}
	
			.bus-image-box {
				position: absolute;
				top: 0rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				// border: 1px solid red;
				height: 70rpx;
	
				.bus-num {
					// margin:0rpx auto;
					color: #26A2FF;
					font-size: 12px;
					position: absolute;
					top: 0rpx;
				}
	
				.bus-image {
					position: absolute;
					top: 36rpx;
					width: 50rpx;
					height: 26rpx;
				}
			}
	
		}
	
	}
	.bus-image-box {
		position: absolute;
		top: 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// border: 1px solid red;
		height: 70rpx;
	
		.bus-num {
			// margin:0rpx auto;
			color: #26A2FF;
			font-size: 12px;
			position: absolute;
			top: 0rpx;
		}
	
		.bus-image {
			position: absolute;
			top: 36rpx;
			width: 50rpx;
			height: 26rpx;
		}
	}
	.footer {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		padding: 0 10px 0 10px;
		font-size: 32rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 5;
		box-shadow: 0px 4px 10px 0px #353535;
	}
	.order-button {
		height: 40px;
		width: 100%;
		background-image: linear-gradient(to right, #5e73ff, #007AFF);
		border-radius: 20px;
		color: #FFFFFF;
		line-height: 40px;
		text-align: center;
		font-weight: 500;
	}
	.ddfache{
		background-image: linear-gradient(to right, #5e73ff, #007AFF);
		height: 30px;
		width: 70px;
		color: #FFFFFF;
		line-height: 30px;
		border-radius: 4px;
		text-align: center;
	}
	.no-real{
		text-align: center;
		color: #000000;
		font-size: 20px;
		font-weight: 700;
	}
	.yuj{
		color: #007AFF;
		margin-left: 80px;
	}
	.station-name {
		padding-bottom: 30rpx;
		
		text {
			color: #000000;
			font-size: 30rpx;
			padding: 0 6rpx;
		}
	}
	
	.bus-list-item {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.top {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 10rpx;
			.gif-img {
				width: 12rpx;
				height: 24rpx;
				margin-right: 14rpx;
			}
		
			.time-box {
				color: #007AFF;
		
				.time-value {
					font-weight: 700;
					font-size: 36rpx;
				}
			}
		}
		
		.bottom {}
		
		// 单行提示
		.single-line-tips{
			color: #007AFF;
			// font-weight: 700;
			font-size: 40rpx;
			height: 100%;
			display: flex;
			align-items: center;
		}
		
	}
	
	.nobus-box {
		// background-color: red;
		// display: block;
		width: 100%;
		padding: 26rpx 0;
		
		.tips-text {
			// text-align: center;
			color: #007AFF;
			font-size: 36rpx;
		}
	}
	.map-btn{
		width: 100rpx;
		height: 100rpx;
	}
	.rest-btn{
		position: absolute;
		bottom: 50rpx;
		right: 20rpx;
		z-index: 9;
	}
</style>
